<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="flex padding justify-between">
				<view class="flex align-center">
					<view v-if="!avatar" class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round"
						mode="widthFix">
					</image>
					<view v-if="!name" @click="handleToLogin" class="login-tip">
						点击登录
					</view>
					<view v-if="name" @click="handleToInfo" class="user-info">
						<view class="u_title">
							用户名：{{ name }}
						</view>
					</view>
				</view>
				<view @click="handleToInfo" class="flex align-center">
					<text>个人信息</text>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>

		<!-- end 用户信息 -->

		<view class="list-cont">
			<!-- 订单状态 -->
			<view class="total-order">
				<view class="order-tit">
					<text style="font-weight:bold">
						我的订单
					</text>
					<view class="checkmore" data-sts="0" @click.native="toOrderListPage">
						<text>查看全部</text>
						<text class="arrowhead" />
					</view>
				</view>
				<view class="procedure">
					<view class="items" data-sts="1" @click.native="toOrderListPage">
						<image src="@/static/images/icon/toPay.png" />
						<text>待支付</text>
						<text v-if="orderAmount.unPay>0" class="num-badge">
							{{ orderAmount.unPay }}
						</text>
					</view>
					<view class="items" data-sts="2" @click.native="toOrderListPage">
						<image src="@/static/images/icon/toDelivery.png" />
						<text>待发货</text>
						<text v-if="orderAmount.payed>0" class="num-badge">
							{{ orderAmount.payed }}
						</text>
					</view>
					<view class="items" data-sts="3" @click.native="toOrderListPage">
						<image src="@/static/images/icon/toTake.png" />
						<text>待收货</text>
						<text v-if="orderAmount.consignment>0" class="num-badge">
							{{ orderAmount.consignment }}
						</text>
					</view>
					<view class="items" data-sts="5" @click.native="toOrderListPage">
						<image src="@/static/images/icon/toComment.png" />
						<text>已完成</text>
					</view>
				</view>
			</view>
			<!--end 订单状态 -->

			<view class="prod-col">
				<view class="col-item" @click.native="myCollectionHandle">
					<view v-if="loginResult" class="num">
						{{ collectionCount }}
					</view>
					<view v-else class="num">
						--
					</view>
					<view class="tit">
						我的收藏
					</view>
				</view>
				<view class="col-item" @click.native="handleTips">
					<view v-if="loginResult" class="num">
						5
					</view>
					<view v-else class="num">
						--
					</view>
					<view class="tit">
						我的消息
					</view>
				</view>
				<view class="col-item" @click.native="handleTips">
					<view v-if="loginResult" class="num">
						3
					</view>
					<view v-else class="num">
						--
					</view>
					<view class="tit">
						我的足迹
					</view>
				</view>
			</view>

			<view class="menu-list">
				<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
					<view class="menu-item-box">
						<view class="iconfont icon-user menu-icon"></view>
						<view>编辑资料</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click.native="toAddressList">
					<view class="menu-item-box">
						<view class="iconfont icon-help menu-icon"></view>
						<text>收货地址</text>
					</view>
				</view>
			
				<view class="list-cell list-cell-arrow" @click="handleAbout">
					<view class="menu-item-box">
						<view class="iconfont icon-aixin menu-icon"></view>
						<view>关于我们</view>
					</view>
				</view>
				<view class="list-cell list-cell-arrow" @click="handleToSetting">
					<view class="menu-item-box">
						<view class="iconfont icon-setting menu-icon"></view>
						<view>应用设置</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		login
	} from '../../api/login';
	import {
		mineOrderCount,
		mineCollection
	} from '../../api/mine.js'
	export default {
		data() {
			return {
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				picDomain: "",
				isAuthInfo: false,
				loginResult: '',
				orderAmount: '',
				collectionCount: 0
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		methods: {
			/**
			 * 查询所有的收藏量
			 */
			toDistCenter() {
				uni.showToast({
					icon: 'none',
					title: '该功能未开源'
				})
			},
			toCouponCenter() {
				uni.showToast({
					icon: 'none',
					title: '该功能未开源'
				})
			},
			toMyCouponPage() {
				uni.showToast({
					icon: 'none',
					title: '该功能未开源'
				})
			},
			handleTips() {
				uni.showToast({
					icon: 'none',
					title: '该功能未开源'
				})
			},
			toAddressList() {
				uni.navigateTo({
					url: '/pages/delivery-address/delivery-address'
				})
			},
			toOrderListPage(e) {
				const sts = e.currentTarget.dataset.sts
				uni.navigateTo({
					url: '/pages/orderList/orderList?sts=' + sts
				})
			},
			/**
			 * 查询所有的收藏量
			 */
			showCollectionCount() {
				uni.showLoading()
				mineCollection()
					.then(({
						data
					}) => {
						uni.hideLoading()
						this.collectionCount = data
					})
			},
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},
			handleJiaoLiuQun() {
				this.$modal.showToast('QQ群：①133713780、②146013835')
			},
			handleBuilding() {
				this.$modal.showToast('模块建设中~')
			},
			/**
			 * 我的收藏跳转
			 */
			myCollectionHandle() {
				let url = '/pages/index/prodClassify?sts=5'
				const id = 0
				const title = '我的收藏商品'
				if (id) {
					url += '&tagid=' + id + '&title=' + title
				}
				uni.navigateTo({
					url
				})
			},
			/**
			 * 去登陆
			 */
			toLogin() {
				uni.navigateTo({
					url: '/pages/login'
				})
			},
			/**
			 * 退出登录
			 */
			logout() {
				// 设置用户信息
				this.$store.dispatch('LogOut')
					.then(() => {
						uni.removeStorageSync('loginResult')
						uni.removeStorageSync('token')
						uni.showToast({
							title: '退出成功',
							icon: 'none'
						})
						this.orderAmount = ''
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000)
					})
			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.loginResult = uni.getStorageSync('loginResult')
			this.isAuthInfo = this.loginResult
			// 加载订单数字
			if (this.isAuthInfo) {
				uni.showLoading()
				mineOrderCount()
					.then(({
						data
					}) => {
						uni.hideLoading()
						this.orderAmount = data
					})
				this.showCollectionCount()
			}
		},
		created() {
			/* const picDomain = import.meta.env.VITE_APP_RESOURCES_URL*/
			const picDomain = process.env.VUE_APP_RESOURCES_URL;
			// 现在你可以在组件中使用picDomain
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.container {
		background-color: #f7f7f7;
		padding-bottom: 60rpx;
	}

	.userinfo {
		position: relative;
		width: 100%;
		background: #fff;
		text-align: center;
		padding: 30rpx 0;

		.userinfo-con {
			width: 240rpx;
			margin: auto;

			.userinfo-avatar {
				overflow: hidden;
				display: block;
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
				margin: auto;

				image {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.userinfo-name {
				font-size: 30rpx;
				font-weight: bold;
				margin-top: 20rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
				word-break: break-all;
			}
		}
	}

	.userinfo-none {
		display: flex;
		padding: 30rpx;
		background: #fff;
		align-items: center;

		.default-pic {
			padding-right: 30rpx;

			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}

	.none-login {
		button {
			background: #fff;

			&::after {
				border: 0;
			}
		}

		.unlogin {
			font-size: 30rpx;
			text-align: left;
			padding: 0;
		}

		.click-login {
			font-size: 26rpx;
			color: #777;
			text-align: left;
			padding: 0;
		}
	}

	.binding-phone {
		position: relative;
		background: #fff;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
		border-top: 2rpx solid #f7f7f7;
		border-bottom: 2rpx solid #f7f7f7;

		.show-tip {
			font-size: 26rpx;
		}

		.gotobinding {
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #e24b4b;
			font-weight: bold;
		}
	}

	.list-cont {
		width: 100%;
		background: #f7f7f7;
		margin-top: 20rpx;

		.total-order {
			background: #fff;

			.order-tit {
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				border-bottom: 1px solid #f7f7f7;
				padding: 0 30rpx;

				.checkmore {
					font-size: 22rpx;
					color: #80848f;
					display: flex;
					align-items: center;
				}
			}

			.procedure {
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 25rpx;
				height: 160rpx;

				.items {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 70rpx;
						height: 70rpx;
						margin-bottom: 20rpx;
					}

					.num-badge {
						position: absolute;
						top: -15rpx;
						right: -12rpx;
						color: #eb2444;
						border: 3rpx solid #eb2444;
						border-radius: 50rpx;
						background: #fff;
						min-width: 30rpx;
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
						padding: 2rpx;
						display: block;
					}
				}
			}
		}

		.my-menu {
			background-color: #fff;
			margin-top: 20rpx;

			.memu-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				border-bottom: 2rpx solid #f7f7f7;
				padding: 0 30rpx;

				&:nth-child(1) {
					border-top: 2rpx solid #f7f7f7;
				}

				&:last-child {
					border-bottom: none;
				}

				text {
					font-size: 28rpx;
				}

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}

				.i-name {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.arrowhead {
		width: 15rpx;
		height: 15rpx;
		border-top: 2rpx solid #999;
		border-right: 2rpx solid #999;
		transform: rotate(45deg);
		margin-left: 10rpx;
	}

	.prod-col {
		margin-top: 20rpx;
		background: #fff;
		display: flex;
		justify-content: space-around;
		padding: 30rpx 0 10rpx 0;
		font-size: 12px;

		.col-item {
			text-align: center;

			.num {
				font-size: 16px;
				font-weight: 700;
				color: #3a86b9;
			}

			.tit {
				line-height: 34px;
			}
		}
	}

	.log-out {
		padding: 20rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.log-out-n {
		font-size: 30rpx;
		margin: auto;
		width: 200rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background: #e43130;
		color: #ffffff;
	}

	button.memu-btn.memu-item {
		background-color: #fff;

		&:after {
			border: 0;
		}
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			padding: 15px 15px 45px 15px;
			background-color: #3c96f3;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}
</style>